<template>
	<view>
		<view class="fixed">
			<!-- 状态栏 -->
			<view class="statusBar" :style="'height:'+statusBarHeight+'px'"></view>
			<view class="myheader padding-sm font-sub-title">
				<text class="cuIcon-back margin-right-ssm" @click="back()"></text>
				医生详情
			</view>
		</view>
		<view class="cu-list menu sm-border" :style="{marginTop:navHeight}">
			<view class="name_box bg-white">
				<view class="content">
					<text class="margin-right font-sub-title" style="color:#c03815">{{name}}</text>
					<text class="font-small text-light-gray">{{position}}</text>
				</view>
			</view>
			<view class="info_box bg-white">
				<view class="content">
					<text class="font-normal text-light-gray">科室：</text><text class="font-normal">{{department}}</text>
				</view>
				<view class="content">
					<text class="font-normal text-light-gray">擅长：</text><text class="font-normal">{{special}}</text>
				</view>
			</view>
			<view class="cu-item bg-white text-right">
				<view class="content">
					<button class="cu-btn bg-blue font-normal" style="border-radius: 0;"  @tap="showModal" data-target="DialogModal">请求签约</button>
				</view>
			</view>
		</view>
		<view class="bg-white padding-sm">
			<view class="cu-avatar xl round margin-right" :style="{ backgroundImage: 'url(' + avatar + ')'}"></view>
			<text class="font-small">{{intro}}</text>
		</view>
		<view class="cu-modal" :class="modalName=='DialogModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">温馨提示</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					您确定签约该医护人员？
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-blue text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-blue margin-left" @tap="sign">确定</button>
		
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import _config from '@/config/index.js'
	var that
	export default {
		computed: {
			...mapGetters(['navHeight']),
		},
		data() {
			return {
				avatar: '',
				user:'',
				statusBarHeight: Vue.prototype.StatusBar,
				name: '',
				position: '',
				department: '',
				special: '',
				intro: '',
				id:'',
				modalName:'',
			}
		},
		onLoad(option) {
			that = this;
			this.user = uni.getStorageSync("userInfo")
			var doctor = JSON.parse(option.params)
			this.name = doctor.name
			this.position = doctor.position
			this.department = doctor.departmentName
			this.special = doctor.specialty
			this.type = option.type
			this.avatar = doctor.avatar||_config.NGINX_SERVER+'imgs/avatar/avatar.jpg'
			this.id = doctor.medicalstaff_id
			
			this.$http.queryMedicalStaffDetail({
				medicalStaffId:this.id
			}).then(res=>{
				if(res.code==1){
					that.intro = res.result.INTRO
				}
			})
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			sign(){
				this.$http.signCare({
					careType:that.type,
					carerId:that.id
				}).then((res)=>{
					that.hideModal()
					if(res.code==1){
						uni.showToast({
							title:"申请成功，请等待回复！",
							position:"bottom",
							icon:"none"
						})
					}else{
						uni.showToast({
							title:res.message,
							position:"bottom",
							icon:"none"
						})
					}
				})
			}
		}
	}
</script>

<style>
	.cu-avatar {
		float: left;
	}

	.name_box,
	.info_box {
		padding: 20rpx;
		padding-left: 25rpx;
		padding-bottom: 0;
	}
</style>
